<template>
  <div id="confirm-order-page">
    <div class="page-title">
      <div id="back-button" @click="$router.push('/')">
        <i href="javascript:void(0)" class="el-icon-arrow-left"></i>
      </div>
      <span>订单确认</span>
    </div>
    <div class="address-box">
      <!--      <div class="title-bar">地址信息</div>-->
      <address-item v-if="isGet" :addressData="address" :show-type="1"/>
      <div class="bottom-bar"></div>
    </div>

    <div class="shop-and-product-box">
      <div class="shop-info">
        <div class="shop-logo">
          <img :src="supplier.logo"/>
        </div>
        <div class="shop-name" v-text="supplier.name"></div>
      </div>
      <product-list-item v-for="(product,index) in productList" :key="index" :show-type="1" :curr-product="product"
                         :change-call-back="changeNums"/>
      <div class="choose-send" style="border-bottom: 1px solid #f1f1f1">
        <div class="left">物流方式</div>
        <div class="right">
          <div class="send-type" @click="chooseSendType">
            <span v-text="dict.OrderSendTypeArr[sendType]"></span>
            <i class="el-icon-arrow-right"></i>
          </div>
          <div class="send-time" @click="chooseSendTime" v-if="sendType===1 && address.id>0">
            <div class="same-city-send-info"
                 v-html="sameCitySendInfo?sameCitySendInfo+' 前送达':'<span>请选择配送时间</span>'"></div>
          </div>
        </div>
      </div>
      <div class="choose-send">
        <div class="left">是否带发票</div>
        <div class="right">
          <el-switch
            v-model="isInvoice"
            active-color="#13ce66"
            inactive-color="#CCCCCC">
          </el-switch>
        </div>
      </div>
      <div class="choose-send">
        <div class="left">附言</div>
        <div class="right">
          <el-input type="textarea" v-model="info" maxlength="100" placeholder="订单备注"></el-input>
        </div>
      </div>
      <div class="c"></div>
    </div>

    <div class="product-price-detail">
      <div class="title">金额明细</div>
      <div class="item">
        <div class="left">商品金额:</div>
        <div class="right">
          <span v-text="ToMoney(productPrice)"></span>
        </div>
      </div>
      <div class="item">
        <div class="left">配送费用:
          <div class="tip-box free-express-price" v-if="expressPrice===0 || sendType===2">免配送费</div>
        </div>
        <div class="right" v-text="ToMoney(expressPrice)"></div>
      </div>
      <div class="item">
        <div class="left">优惠券:
          <div class="tip-box coupon-use-box" v-text="'您有'+couponList.length+'张优惠券'" @click="chooseCoupon"></div>
        </div>
        <div class="right">
          <span v-if="currCoupon && currCoupon.reduceMoney>0" v-text="'-'+ToMoney(currCoupon.reduceMoney)"></span>
          <span v-if="!currCoupon.id">-</span>
          <i v-if="currCoupon && currCoupon.reduceMoney>0" class="el-icon-arrow-right"></i>
        </div>
      </div>
      <div class="item">
        <div class="left">店铺满减:
          <div class="tip-box coupon-use-box" v-text="'满'+currFullMinus.full+'减'+currFullMinus.minus"
               v-if="currFullMinus.full>0"></div>
        </div>
        <div class="right">
          <span v-if="currFullMinus.minus>0" v-text="'-'+ToMoney(currFullMinus.minus)"></span>
          <span v-if="!currFullMinus.minus || currFullMinus.minus===0" v-text="ToMoney(currFullMinus.minus)"></span>
        </div>
      </div>
      <div class="item">
        <div class="left">合计:</div>
        <div class="right">
          <span class="red" v-text="'￥'+ToMoney(price)"></span>
        </div>
      </div>
      <!--      <div class="item">-->
      <!--        <div class="left">店铺特殊优惠: </div>-->
      <!--        <div class="right" v-text="ToMoney(currCoupon.price)"></div>-->
      <!--      </div>-->
    </div>

    <div class="pay-choose-box">
      <div class="title">支付方式</div>
      <div class="item" @click="payType=0">
        <div class="left">
          <div class="icon money-pay"></div>
          <span>余额支付</span>
        </div>
        <div class="right">
          <div class="pay-choose-icon" :class="payType===0?'on':''"></div>
        </div>
      </div>
      <div class="item" @click="payType=1">
        <div class="left">
          <div class="icon ali-pay"></div>
          <span>支付宝</span>
        </div>
        <div class="right">
          <div class="pay-choose-icon" :class="payType===1?'on':''"></div>
        </div>
      </div>
      <div class="item" @click="payType=2">
        <div class="left">
          <div class="icon wechat-pay"></div>
          <span>微信</span>
        </div>
        <div class="right">
          <div class="pay-choose-icon" :class="payType===2?'on':''"></div>
        </div>
      </div>
      <div class="item" @click="payType=3">
        <div class="left">
          <div class="icon enterprise-pay"></div>
          <span>对公支付</span>
        </div>
        <div class="right">
          <div class="pay-choose-icon" :class="payType===3?'on':''"></div>
        </div>
      </div>
    </div>

    <div class="page-bottom" align="center">
      <el-button type="danger" size="medium" @click="submit">确认购买</el-button>
    </div>
  </div>
</template>

<script>
import AddressItem from '../common/AddressItem'
import ProductListItem from '../common/ProductListItem'

export default {
  name: 'ConfirmOrderBox',
  components: {ProductListItem, AddressItem},
  data: function () {
    return {
      isInvoice:false,
      info:'',
      payType: 0,
      sendType: 0,
      sameCitySendInfo: '',
      isGet: true,
      totalMoney: 0,
      accountMoney: 0,
      address: {
        id: 0,
        name: '',
        mobile: '',
        provice: '',
        city: '',
        county: '',
        location: '',
        address: '',
        isDefault: 0,
      },
      supplier: {},
      productList: [],
      couponList: [],
      productBuyNumsMap: {},
      productPrice: 0,
      expressPrice: 10,
      currCoupon: {},
      currFullMinus: {
        full: 0,
        minus: 0,
      },
      supplierDiscountPrice: -15,
      price: 180,
      selectData: {}
    }
  },
  mounted () {
    this.initData()
    this.getDefaultAddress()
    this.getAccountMoney()
    this.getSupplierDetail()
  },
  methods: {
    // 提交订单
    submit: function () {
      let $this = this
      // 1.非自提需要地址信息
      if ($this.sendType !== 2 && !$this.address.id) {
        return $this.$message.warning('请先选择 地址')
      }
      // 2.同城配送需要配送时间
      if ($this.sendType === 1 && !$this.sameCitySendInfo) {
        return $this.$message.warning('请先选择 配送时间')
      }
      // 3.商品购买数据
      var productBuyNumsList = []
      $this.productList.forEach(function (value, index) {
        productBuyNumsList.push({
          id: value.id,
          nums: value.nums,
          model: value.model,
        })
      })

      let form = {
        info: $this.info,
        isInvoice: $this.isInvoice?1:0,
        payType: $this.payType,
        shopId: $this.shop.id,
        sendType: $this.sendType,
        addressId: $this.address.id,
      }
      form.productBuyNumsList = JSON.stringify(productBuyNumsList)
      // 5.同城配送-配送时间
      form.sendTime = $this.sameCitySendInfo
      if ($this.payType === 0 && $this.price > $this.accountMoney) {
        return $this.$message.success('当前账户余额不足', 'warning')
      }
      var url = 'Order/submit'

      $this.MyRequest($this.ApiDoNameShop + url, form, function (orderNo) {
        $this.$message.success('提交成功')
        // 商品详情: 立即购买，拼团购买-不进行购物车删除操作
        let noClearTypeArr = ['group', 'one', 'shopProductPurchase']
        if (noClearTypeArr.indexOf($this.$route.query.type) === -1) {
          productBuyNumsList.forEach(function (value, index) {
            MyCartTools.delProduct(value.id, value.model)
          })
        }

        var tmpList = []
        $this.productList.forEach(function (value, index) {
          tmpList.push({
            id: value.id,
            nums: value.nums,
            name: value.name,
            model: value.model,
          })
        })
        var orderData = {
          productList: tmpList.slice(0, 3),
          price: $this.price,
        }

        // 余额支付,已支付成功返回订单列表
        if ($this.payType === 0) {
          alert('余额支付成功')
          // $this.$router.push({
          //   name: 'PaySuccess',
          //   query: {
          //     type: 'order',
          //     payType: 0,
          //     orderNo: orderNo,
          //     orderData: encodeURI(JSON.stringify(orderData))
          //   }
          // })
        }

        // 对公支付,跳转至打款信息页面
        if ($this.payType === 3) {
          alert('对公支付')
          // 附加商品,价格信息至参数
          /* $this.$router.push({
            name: 'EnterprisePayInfo',
            query: {
              type: 'order',
              orderNo: orderNo,
              orderData: encodeURI(JSON.stringify(orderData))
            }
          }) */
        }
        $this.$forceUpdate()
      }, function (msg) {
        $this.$message.error(msg)
      })
    },
    // 初始化信息
    initData: function () {
      var selectProductDataString = localStorage.getItem('selectProductData')
      var selectData = JSON.parse(selectProductDataString)
      this.supplier = selectData.supplier
      this.productList = selectData.productList
      let $this = this
      setTimeout(function () {
        $this.calcProductMoney()
      }, 1500)
    },
    calcProductMoney: function () {
      var productPrice = 0
      let $this = this
      this.productList.forEach(function (product, index) {
        productPrice = (productPrice + ((product.nums * product.price).toFixed(2) - 0)).toFixed(2) - 0
      })
      $this.price = productPrice
      this.productPrice = productPrice
      if (this.productPrice > this.supplier.freeExpressPrice) {
        this.expressPrice = 0
      }
      var currFull = {
        full: 0,
        minus: 0,
      }
      this.supplier.fullMinusPrice.forEach(function (item, index) {
        if (item.full <= $this.productPrice && item.minus > currFull.minus) {
          currFull = item
        }
      })
      $this.currFullMinus = currFull
      if ($this.currFullMinus.minus > 0) {
        $this.price = (productPrice - $this.currFullMinus.minus).toFixed(2) - 0
      }
      if ($this.expressPrice > 0) {
        $this.price = ($this.price + $this.expressPrice).toFixed(2) - 0
      }
      // 筛选优惠券
      var tmpList = []
      $this.couponList.forEach(function (value, index) {
        if (value.fullMoney <= $this.productPrice) {
          tmpList.push(value)
        }
      })
      $this.couponList = tmpList
      this.$forceUpdate()
    },
    // 获取-默认地址
    getDefaultAddress: function () {
      var $this = this
      var addressId = 0
      if ($this.$route.query.chooseAddressId) {
        addressId = $this.$route.query.chooseAddressId
      }
      $this.MyRequest($this.ApiDoNameShop + 'ShopAddress/getDetail', {id: addressId}, function (data) {
        if (data.id) {
          $this.address.id = data.id
          $this.address.name = data.name
          $this.address.province = data.province
          $this.address.city = data.city
          $this.address.county = data.county
          $this.address.mobile = data.mobile
          $this.address.address = data.address
          $this.address.isDefault = data.isDefault === 1
        }
        $this.isGet = true
        $this.$forceUpdate()
      }, function (msg) {
        $this.$message.error(msg)
      })
    },
    // 更改数量回调
    changeNums: function () {
      this.calcProductMoney()
    },
    // 获取店铺信息
    getSupplierDetail: function () {
      let $this = this
      $this.MyRequest($this.ApiDoNameShop + 'Supplier/getDetail', {id: $this.supplier.id}, function (data) {
        $this.shop = data
        $this.expressPrice = data.expressPrice
        $this.$forceUpdate()
      }, function (msg) {
        $this.$message.error(msg)
      })
    },
    // 获取-当前账户最新余额
    getAccountMoney: function () {
      let $this = this
      $this.MyRequest($this.ApiDoNameShop + 'Shop/money', {}, function (money) {
        $this.accountMoney = money
        $this.$forceUpdate()
      }, function (msg) {
        $this.$message.error(msg)
      })
    },
    chooseSendType: function () {
      let $this = this
      $this.bus.$emit('ChooseSendTypeDialogCallBus', this.sendType, function (sendType) {
        $this.sendType = sendType
        $this.$forceUpdate()
      })
    }
  }
}
</script>

<style scoped>

</style>
